UserCSS: 外部リンクにアイコンを表示
#UserCSS #Scrapbox
See: /villagepump/特定のリンクにアイコンをつけるUserCSS
基本
https://0b5vr.com
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="http://"],
[href^="https://"],
)::after {
content: '';
background-image: url('https://gyazo.com/b29811bbc0c54a1bba1375e03b9be41a/max_size/32');
width: 1em;
height: 1em;
margin: 0 4px -2px;
background-size: contain;
display: inline-block;
}
Bandcamp
https://frums.bandcamp.com/
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://bandcamp.com/"],
href*=".bandcamp.com",
)::after {
background-image: url('https://gyazo.com/2c5582979af56e101046cefa90142965/max_size/32');
}
Bluesky
https://bsky.app/profile/0b5vr.bsky.social
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://bsky.app/"],
)::after {
background-image: url('https://gyazo.com/a702aa0efe15cde8f7042c3b98f63b3a/max_size/32');
}
Cables.gl
https://cables.gl/p/9Ls2H2
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://cables.gl"],
)::after {
background-image: url('https://gyazo.com/d23e58ba6d7c8c660710c886f19a033b/max_size/32');
}
CodeSandbox
https://lkltwc.csb.app/
https://codesandbox.io/p/sandbox/lkltwc
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://codesandbox.io"],
href*=".csb.app/",
)::after {
background-image: url('https://gyazo.com/7bc190ddd6607e89bcf544fedde1f913/max_size/32');
}
crates.io
https://crates.io/crates/serde
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://crates.io"],
)::after {
background-image: url('https://gyazo.com/835dd6a18132048a52ac569f2615b59d/max_size/32');
}
Demozoo
https://livecode.demozoo.org/
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://demozoo.org/"],
href*=".demozoo.org",
)::after {
background-image: url('https://gyazo.com/8c1071299952d4fb72bf6f20aab5b755/max_size/32');
}
Discogs
https://www.discogs.com/label/16366-Genosha-Recordings
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://www.discogs.com/"],
)::after {
background-image: url('https://gyazo.com/22176b7a5a2dfbf71b01b262d436d849/max_size/32');
}
Discord
https://discord.gg/HSVZCwqh4x
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://discord.com"],
[href^="https://discord.gg"],
)::after {
background-image: url('https://gyazo.com/de7720d73c2f9a298a8ec7109521f9cd/max_size/32');
}
DOI Foundation (Digital Object Identifier)
https://doi.org/10.1145/1281500.1281665
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://doi.org"],
)::after {
background-image: url('https://gyazo.com/e43d89105a4596dd8e769945c42fc4fc/max_size/32');
}
GitHub
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://github.com"],
[href^="https://raw.githubusercontent.com"],
[href^="https://gist.github.com"],
href*=".github.io/",
)::after {
background-image: url('https://gyazo.com/7c422620b1ff2cee53ee79c23c65e3ac/max_size/32');
}
Glitch.com
https://just-pato.glitch.me
https://glitch.com/edit/#!/just-pato
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://glitch.com"],
href*="glitch.me",
)::after {
background-image: url('https://gyazo.com/81e550e211d9cb16a13a3d10ddd2dd8b/max_size/32');
}
Internet Archive / Wayback Machine
https://archive.org/details/the-complete-dancing-baby-screensaver-cd-rom
https://web.archive.org/web/20080125223352/http://www.axsword.com:80/axsword.html
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://archive.org/"],
[href^="https://web.archive.org/"],
)::after {
background-image: url('https://gyazo.com/5f5835a0467bc647c226c5fab657ad3f/max_size/32');
}
itch.io
https://dmullinsgames.itch.io/
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://itch.io/"],
href*=".itch.io",
)::after {
background-image: url('https://gyazo.com/1492e1e1b478fc72fdca08b506244a9f/max_size/32');
}
Know Your Meme
https://knowyourmeme.com/memes/all-your-base-are-belong-to-us
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://knowyourmeme.com/"],
)::after {
background-image: url('https://gyazo.com/3aab1284a5ab52f6fbf4a2aaafc89873/max_size/32');
}
MDN Web Docs
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://developer.mozilla.org/"],
)::after {
background-image: url('https://gyazo.com/83c06b91fc38f1e6a70d3d6cdebf0bd4/max_size/32');
}
npm
https://www.npmjs.com/package/@0b5vr/experimental
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://www.npmjs.com"],
)::after {
background-image: url('https://gyazo.com/1996fcfdf7ca81ea795f67f093d7f449/max_size/32');
}
pouët
https://www.pouet.net/user.php?who=104878
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://www.pouet.net"],
)::after {
background-image: url('https://gyazo.com/5a3f53d38f93a6e935900dc9e433cb24/max_size/32');
}
Shadertoy
https://www.shadertoy.com/user/0b5vr
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://www.shadertoy.com"],
)::after {
background-image: url('https://gyazo.com/78ddff9b4ca70861575ae987e8f2d3c8/max_size/32');
}
Soundcloud
https://soundcloud.com/explorersoftheinternet
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://soundcloud.com"],
)::after {
background-image: url('https://gyazo.com/e1bbf2aab4925838663fec09394e9362/max_size/32');
}
StackBlitz
https://stackblitz.com/edit/clack-prompts?file=index.js
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://stackblitz.com"],
[href^="https://stackblitz.io"],
)::after {
background-image: url('https://gyazo.com/fac97c62f75612f04b26e163195077ba/max_size/32');
}
Twitter
https://twitter.com/0b5vr
https://x.com/0b5vr
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://twitter.com"],
[href^="https://x.com"],
)::after {
background-image: url('https://gyazo.com/c2125a70ba8ec33a2757e045a6f1d70c/max_size/32');
}
TV Tropes
https://tvtropes.org/pmwiki/pmwiki.php/Main/BreakingTheFourthWall
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://tvtropes.org"],
)::after {
background-image: url('https://gyazo.com/24c66ba628c8f2f85bdd84cc6790c7b3/max_size/32');
}
Wikipedia
https://ja.wikipedia.org/wiki/円周率は3
code:style.css
:is(.line, .line .deco) a.link:is(
href*=".wikipedia.org",
)::after {
background-image: url('https://gyazo.com/2677849cffa43cddb936816ca451ed64/max_size/32');
}
YouTube
https://www.youtube.com/@0b5vr
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://youtube.com"],
[href^="https://www.youtube.com"],
[href^="https://youtu.be"],
)::after {
background-image: url('https://gyazo.com/ca6d67e60f758d352745329b283e8f32/max_size/32');
}
Zenn
https://zenn.dev/mebiusbox/books/619c81d2fbeafd
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://zenn.dev"],
)::after {
background-image: url('https://gyazo.com/9a1520a28c72ef8b70e9742412ec2ec6/max_size/32');
}